<template>
  <div>
    <h1>Home组件</h1>
    <div>
      <button @click="toGame">游戏</button>
      <button @click="toMusic">音乐</button>
      <button @click="toPlay">娱乐</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    toGame() {
      // console.log(this);
      //我们还可以借助router的实例的push或replace方法(不会留下任何历史记录),通过编写代码来实现路由跳转
      //push方法接受第一个location参数,可以是字符串的形式,代表当前要跳转的路由地址
      // this.$router.push("/home/game");
      this.$router.replace("/home/game");
    },
    toMusic() {
      // this.$router.push({
      //   path: "/home/music",
      // });
      this.$router.replace({
        path: "/home/music",
      });
    },
    toPlay() {
      //push方法接收第一个location参数,可以是对象形式,通过name属性进行跳转
      // this.$router.push({
      //   name: "play",
      // });
      this.$router.replace({
        name: "play",
      });
    },
  },
};
</script>

<style>
</style>